/*
* @Author: Choisaaaa
* @Date: 2018/5/5  20:58
* 子组件 修改 父组件的值
*/


import React from  "react";
import ReactDOM from 'react-dom';

//子组件
class Child extends React.Component{
    constructor(props){
        super(props);
    }
    onInputChange(e){
        let newVaue = e.target.value;
        this.props.onFatherChange(newVaue);//向父组件的回调函数传递参数
    }
    render(){
        return (
            <div>
                <p> {this.props.name}</p>
                <hr/>
                <p>  以下内容来自于子组件</p>
                <input onClick={(e)=>{this.onInputChange(e)}} />
            </div>
        )
    }
}

//父组件
class Father extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name : "我是来自于父组件"
        }
    }
    onFatherValueChange(newValue){ //父组件根据回调函数返回的值调用该函数 修改state
        this.setState({
            name : newValue
        });
    }
    render() {
        return (
            <Child name ={this.state.name} onFatherChange={(newValue) =>{this.onFatherValueChange(newValue)}}/>
        );
    }
}

ReactDOM.render(
    <div>
        <Father/>
    </div>,
    document.getElementById("Study")
);